<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">添加超连接</button>
<ul id="ul">
    <li><a href="javascript:;" class="link">超1</a></li>
    <li><a href="javascript:;" class="link">超2</a></li>
    <li><a href="javascript:;" class="link">超3</a></li>
</ul>
</body>

<script>
    //页面加载之后执行
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            var ul = document.getElementById("ul"); //获取ul
            var li = document.createElement("li");  //创建li
            li.innerHTML = "<a href='javascript:;' class=\"link\">新加的超连接</a>"; //给li添加内容：一个超连接
            ul.appendChild(li) //在ul中添加li
        }

        // 给所有的超连接添加单击事件，这样的话，点击超链接时，会执行所有超链接的点击事件
        var allA = document.getElementsByTagName("a");
        // for (let i = 0; i < allA.length; i++) {
        //     allA[i].onclick = function () {
        //         alert("我是a的单击绑定事件")
        //     }
        // }

        /**
         * 我们希望，只绑定一次事件，既可应用到多个元素上，即使元素师后面添加的
         * 我们可以尝试将其绑定给元素的共同的祖先元素
         *
         * 事件的委派
         *  - 指将事件通义绑定给元素的公共祖先的元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
         *    从而通过祖先元素的响应函数来处理事件
         *  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序性能
         */
        //给所有的ul添加单击事件
        ul.onclick = function (event) {
            event = event || window.event;
            /**
             * 由于我们是给ul绑定了单击事件，所以当点击ul时，会触发ul的点击事件，
             * 但是我们想要的效果是只点击超链接时，触发点击事件，
             * 所以就需要一个taget来判断，当前点击的是不是超链接
             *
             * taget: 触发事件的对象，这里是a元素
             */
            //如果触发的对象是我们期望的元素，则执行，反之则不执行
            if (event.target.className == "link") {
                alert("我是ul的单击相应事件")
            }
        }
    }
</script>

</html>
